<!--<template>-->
<!--  <div>-->
<!--    <div class="gva-search-box">-->
<!--      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter="onSubmit">-->
<!--      <el-form-item label="创建日期" prop="createdAtRange">-->
<!--      <template #label>-->
<!--        <span>-->
<!--          创建日期-->
<!--          <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">-->
<!--            <el-icon><QuestionFilled /></el-icon>-->
<!--          </el-tooltip>-->
<!--        </span>-->
<!--      </template>-->

<!--      <el-date-picker-->
<!--            v-model="searchInfo.createdAtRange"-->
<!--            class="w-[380px]"-->
<!--            type="datetimerange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始时间"-->
<!--            end-placeholder="结束时间"-->
<!--          />-->
<!--       </el-form-item>-->
<!--      -->
<!--            <el-form-item label="运营状态" prop="operationalStatus">-->
<!--  <el-select v-model="searchInfo.operationalStatus" clearable filterable placeholder="请选择" @clear="()=>{searchInfo.operationalStatus=undefined}">-->
<!--    <el-option v-for="(item,key) in operation_statusOptions" :key="key" :label="item.label" :value="item.value" />-->
<!--  </el-select>-->
<!--</el-form-item>-->
<!--            -->
<!--            <el-form-item label="运行状态" prop="runningStatus">-->
<!--  <el-select v-model="searchInfo.runningStatus" clearable filterable placeholder="请选择" @clear="()=>{searchInfo.runningStatus=undefined}">-->
<!--    <el-option v-for="(item,key) in run_stateOptions" :key="key" :label="item.label" :value="item.value" />-->
<!--  </el-select>-->
<!--</el-form-item>-->
<!--            -->
<!--            <el-form-item label="激活状态" prop="activeStatus">-->
<!--  <el-select v-model="searchInfo.activeStatus" clearable filterable placeholder="请选择" @clear="()=>{searchInfo.activeStatus=undefined}">-->
<!--    <el-option v-for="(item,key) in activated_stateOptions" :key="key" :label="item.label" :value="item.value" />-->
<!--  </el-select>-->
<!--</el-form-item>-->
<!--            -->

<!--        <template v-if="showAllQuery">-->
<!--          &lt;!&ndash; 将需要控制显示状态的查询条件添加到此范围内 &ndash;&gt;-->
<!--        </template>-->

<!--        <el-form-item>-->
<!--          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>-->
<!--          <el-button icon="refresh" @click="onReset">重置</el-button>-->
<!--          <el-button link type="primary" icon="arrow-down" @click="showAllQuery=true" v-if="!showAllQuery">展开</el-button>-->
<!--          <el-button link type="primary" icon="arrow-up" @click="showAllQuery=false" v-else>收起</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->
<!--    <div class="gva-table-box">-->
<!--        <div class="gva-btn-list">-->
<!--            <el-button v-auth="btnAuth.add" type="primary" icon="plus" @click="openDialog()">新增</el-button>-->
<!--            <el-button v-auth="btnAuth.batchDelete" icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>-->
<!--            -->
<!--        </div>-->
<!--        <el-table-->
<!--        ref="multipleTable"-->
<!--        style="width: 100%"-->
<!--        tooltip-effect="dark"-->
<!--        :data="tableData"-->
<!--        row-key="ID"-->
<!--        @selection-change="handleSelectionChange"-->
<!--        :header-cell-style="{ background: '#f1f3f4', color: '#333' }"-->
<!--        >-->
<!--        <el-table-column type="selection" width="55" />-->
<!--        -->
<!--        <el-table-column sortable align="left" label="日期" prop="CreatedAt" width="180">-->
<!--            <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>-->
<!--        </el-table-column>-->
<!--        -->
<!--            <el-table-column align="left" label="设备编号" prop="deviceNumber" width="120" />-->

<!--            <el-table-column align="left" label="设备名称" prop="name" width="120" />-->

<!--            <el-table-column align="left" label="所在位置" prop="location" width="120" />-->

<!--            <el-table-column align="left" label="运营状态" prop="operationalStatus" width="120">-->
<!--    <template #default="scope">-->
<!--      <el-tag-->
<!--        :type="getStatusTagType(scope.row.operationalStatus)"-->
<!--        style="padding: 2px 6px; font-size: 12px;"-->
<!--      >-->
<!--    {{ filterDict(scope.row.operationalStatus,operation_statusOptions) }}-->
<!--      </el-tag>-->
<!--    </template>-->
<!--</el-table-column>-->
<!--            <el-table-column align="left" label="运行状态" prop="runningStatus" width="120">-->
<!--    <template #default="scope">-->
<!--      <el-tag-->
<!--        :type="getRunningTagType(scope.row.runningStatus)"-->
<!--        style="padding: 2px 6px; font-size: 12px;"-->
<!--      >-->
<!--    {{ filterDict(scope.row.runningStatus,run_stateOptions) }}-->
<!--      </el-tag>-->
<!--    </template>-->
<!--</el-table-column>-->
<!--            <el-table-column align="left" label="激活状态" prop="activeStatus" width="120">-->
<!--    <template #default="scope">-->
<!--      <div class="activation-status">-->
<!--        <i-->
<!--          :class="scope.row.activeStatus === '已激活' ? 'el-icon-success' : 'el-icon-warning'"-->
<!--          :style="{-->
<!--                  color: scope.row.activeStatus === '已激活' ? '#4caf50' : '#f57c00',-->
<!--                  marginRight: '4px',-->
<!--                  fontSize: '14px'-->
<!--                }"-->
<!--        ></i>-->
<!--    {{ filterDict(scope.row.activeStatus,activated_stateOptions) }}-->
<!--        <el-button-->
<!--          v-if="scope.row.activeStatus === '未激活'"-->
<!--          type="text"-->
<!--          size="mini"-->
<!--          @click="goRemind(scope.row)"-->
<!--          style="color: #409eff; padding: 0; marginLeft:'4px'"-->
<!--        >去提醒</el-button>-->
<!--      </div>-->
<!--    </template>-->
<!--</el-table-column>-->
<!--            <el-table-column align="left" label="软件版本" prop="softwareVersion" width="120" />-->

<!--            <el-table-column align="left" label="售后人员" prop="afterSalesStaff" width="120" />-->

<!--        <el-table-column align="left" label="操作" fixed="right" :min-width="appStore.operateMinWith">-->
<!--            <template #default="scope">-->
<!--            <el-button v-auth="btnAuth.info" type="primary" link class="table-button" @click="getDetails(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看</el-button>-->
<!--            <el-button v-auth="btnAuth.edit" type="primary" link icon="edit" class="table-button" @click="updateDeviceFunc(scope.row)">编辑</el-button>-->
<!--            <el-button  v-auth="btnAuth.delete" type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>-->
<!--            </template>-->
<!--        </el-table-column>-->
<!--        </el-table>-->
<!--        <div class="gva-pagination">-->
<!--            <el-pagination-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            :current-page="page"-->
<!--            :page-size="pageSize"-->
<!--            :page-sizes="[10, 30, 50, 100]"-->
<!--            :total="total"-->
<!--            @current-change="handleCurrentChange"-->
<!--            @size-change="handleSizeChange"-->
<!--            />-->
<!--        </div>-->
<!--    </div>-->
<!--    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="dialogFormVisible" :show-close="false" :before-close="closeDialog">-->
<!--       <template #header>-->
<!--              <div class="flex justify-between items-center">-->
<!--                <span class="text-lg">{{type==='create'?'新增':'编辑'}}</span>-->
<!--                <div>-->
<!--                  <el-button :loading="btnLoading" type="primary" @click="enterDialog">确 定</el-button>-->
<!--                  <el-button @click="closeDialog">取 消</el-button>-->
<!--                </div>-->
<!--              </div>-->
<!--            </template>-->

<!--          <el-form :model="formData" label-position="top" ref="elFormRef" :rules="rule" label-width="80px">-->
<!--            <el-form-item label="设备编号:" prop="deviceNumber">-->
<!--    <el-input v-model="formData.deviceNumber" :clearable="false" placeholder="请输入设备编号" />-->
<!--</el-form-item>-->
<!--            <el-form-item label="设备名称:" prop="name">-->
<!--    <el-input v-model="formData.name" :clearable="false" placeholder="请输入设备名称" />-->
<!--</el-form-item>-->
<!--            <el-form-item label="所在位置:" prop="location">-->
<!--    <el-input v-model="formData.location" :clearable="false" placeholder="请输入所在位置" />-->
<!--</el-form-item>-->
<!--            <el-form-item label="运营状态:" prop="operationalStatus">-->
<!--    <el-select v-model="formData.operationalStatus" placeholder="请选择运营状态" style="width:100%" filterable :clearable="false">-->
<!--        <el-option v-for="(item,key) in operation_statusOptions" :key="key" :label="item.label" :value="item.value" />-->
<!--    </el-select>-->
<!--</el-form-item>-->
<!--            <el-form-item label="运行状态:" prop="runningStatus">-->
<!--    <el-select v-model="formData.runningStatus" placeholder="请选择运行状态" style="width:100%" filterable :clearable="false">-->
<!--        <el-option v-for="(item,key) in run_stateOptions" :key="key" :label="item.label" :value="item.value" />-->
<!--    </el-select>-->
<!--</el-form-item>-->
<!--            <el-form-item label="激活状态:" prop="activeStatus">-->
<!--    <el-select v-model="formData.activeStatus" placeholder="请选择激活状态" style="width:100%" filterable :clearable="false">-->
<!--        <el-option v-for="(item,key) in activated_stateOptions" :key="key" :label="item.label" :value="item.value" />-->
<!--    </el-select>-->
<!--</el-form-item>-->
<!--            <el-form-item label="软件版本:" prop="softwareVersion">-->
<!--    <el-input v-model="formData.softwareVersion" :clearable="false" placeholder="请输入软件版本" />-->
<!--</el-form-item>-->
<!--            <el-form-item label="售后人员:" prop="afterSalesStaff">-->
<!--    <el-input v-model="formData.afterSalesStaff" :clearable="false" placeholder="请输入售后人员" />-->
<!--</el-form-item>-->
<!--          </el-form>-->
<!--    </el-drawer>-->

<!--    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="detailShow" :show-close="true" :before-close="closeDetailShow" title="查看">-->
<!--            <el-descriptions :column="1" border>-->
<!--                    <el-descriptions-item label="设备编号">-->
<!--    {{ detailFrom.deviceNumber }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="设备名称">-->
<!--    {{ detailFrom.name }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="所在位置">-->
<!--    {{ detailFrom.location }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="运营状态">-->
<!--    {{ detailFrom.operationalStatus }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="运行状态">-->
<!--    {{ detailFrom.runningStatus }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="激活状态">-->
<!--    {{ detailFrom.activeStatus }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="软件版本">-->
<!--    {{ detailFrom.softwareVersion }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="售后人员">-->
<!--    {{ detailFrom.afterSalesStaff }}-->
<!--</el-descriptions-item>-->
<!--            </el-descriptions>-->
<!--        </el-drawer>-->

<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import {-->
<!--  createDevice,-->
<!--  deleteDevice,-->
<!--  deleteDeviceByIds,-->
<!--  updateDevice,-->
<!--  findDevice,-->
<!--  getDeviceList-->
<!--} from '@/api/equipment_management/device'-->

<!--// 全量引入格式化工具 请按需保留-->
<!--import { getDictFunc, formatDate,filterDict} from '@/utils/format'-->
<!--import { ElMessage, ElMessageBox } from 'element-plus'-->
<!--import { ref, reactive } from 'vue'-->
<!--// 引入按钮权限标识-->
<!--import { useBtnAuth } from '@/utils/btnAuth'-->
<!--import { useAppStore } from "@/pinia"-->




<!--defineOptions({-->
<!--    name: 'Device'-->
<!--})-->
<!--// 按钮权限实例化-->
<!--    const btnAuth = useBtnAuth()-->

<!--// 提交按钮loading-->
<!--const btnLoading = ref(false)-->
<!--const appStore = useAppStore()-->

<!--// 控制更多查询条件显示/隐藏状态-->
<!--const showAllQuery = ref(false)-->

<!--// 自动化生成的字典（可能为空）以及字段-->
<!--const operation_statusOptions = ref([])-->
<!--const run_stateOptions = ref([])-->
<!--const activated_stateOptions = ref([])-->
<!--const formData = ref({-->
<!--            deviceNumber: '',-->
<!--            name: '',-->
<!--            location: '',-->
<!--            operationalStatus: '',-->
<!--            runningStatus: '',-->
<!--            activeStatus: '',-->
<!--            softwareVersion: '',-->
<!--            afterSalesStaff: '',-->
<!--        })-->



<!--// 验证规则-->
<!--const rule = reactive({-->
<!--               deviceNumber : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               name : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               location : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               operationalStatus : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               runningStatus : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               activeStatus : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               softwareVersion : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               afterSalesStaff : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--})-->

<!--const elFormRef = ref()-->
<!--const elSearchFormRef = ref()-->

<!--// =========== 表格控制部分 ===========-->
<!--const page = ref(1)-->
<!--const total = ref(0)-->
<!--const pageSize = ref(10)-->
<!--const tableData = ref([])-->
<!--const searchInfo = ref({})-->
<!--// 重置-->
<!--const onReset = () => {-->
<!--  searchInfo.value = {}-->
<!--  getTableData()-->
<!--}-->

<!--// 搜索-->
<!--const onSubmit = () => {-->
<!--  elSearchFormRef.value?.validate(async(valid) => {-->
<!--    if (!valid) return-->
<!--    page.value = 1-->
<!--    getTableData()-->
<!--  })-->
<!--}-->

<!--// 分页-->
<!--const handleSizeChange = (val) => {-->
<!--  pageSize.value = val-->
<!--  getTableData()-->
<!--}-->

<!--// 修改页面容量-->
<!--const handleCurrentChange = (val) => {-->
<!--  page.value = val-->
<!--  getTableData()-->
<!--}-->

<!--// 查询-->
<!--const getTableData = async() => {-->
<!--  const table = await getDeviceList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })-->
<!--  if (table.code === 0) {-->
<!--    tableData.value = table.data.list-->
<!--    total.value = table.data.total-->
<!--    page.value = table.data.page-->
<!--    pageSize.value = table.data.pageSize-->
<!--  }-->
<!--}-->

<!--getTableData()-->

<!--// ============== 表格控制部分结束 ===============-->

<!--// 获取需要的字典 可能为空 按需保留-->
<!--const setOptions = async () =>{-->
<!--    operation_statusOptions.value = await getDictFunc('operation_status')-->
<!--    run_stateOptions.value = await getDictFunc('run_state')-->
<!--    activated_stateOptions.value = await getDictFunc('activated_state')-->
<!--}-->

<!--// 获取需要的字典 可能为空 按需保留-->
<!--setOptions()-->


<!--// 多选数据-->
<!--const multipleSelection = ref([])-->
<!--// 多选-->
<!--const handleSelectionChange = (val) => {-->
<!--    multipleSelection.value = val-->
<!--}-->

<!--// 删除行-->
<!--const deleteRow = (row) => {-->
<!--    ElMessageBox.confirm('确定要删除吗?', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--    }).then(() => {-->
<!--            deleteDeviceFunc(row)-->
<!--        })-->
<!--    }-->

<!--// 多选删除-->
<!--const onDelete = async() => {-->
<!--  ElMessageBox.confirm('确定要删除吗?', '提示', {-->
<!--    confirmButtonText: '确定',-->
<!--    cancelButtonText: '取消',-->
<!--    type: 'warning'-->
<!--  }).then(async() => {-->
<!--      const IDs = []-->
<!--      if (multipleSelection.value.length === 0) {-->
<!--        ElMessage({-->
<!--          type: 'warning',-->
<!--          message: '请选择要删除的数据'-->
<!--        })-->
<!--        return-->
<!--      }-->
<!--      multipleSelection.value &&-->
<!--        multipleSelection.value.map(item => {-->
<!--          IDs.push(item.ID)-->
<!--        })-->
<!--      const res = await deleteDeviceByIds({ IDs })-->
<!--      if (res.code === 0) {-->
<!--        ElMessage({-->
<!--          type: 'success',-->
<!--          message: '删除成功'-->
<!--        })-->
<!--        if (tableData.value.length === IDs.length && page.value > 1) {-->
<!--          page.value&#45;&#45;-->
<!--        }-->
<!--        getTableData()-->
<!--      }-->
<!--      })-->
<!--    }-->

<!--// 行为控制标记（弹窗内部需要增还是改）-->
<!--const type = ref('')-->

<!--// 更新行-->
<!--const updateDeviceFunc = async(row) => {-->
<!--    const res = await findDevice({ ID: row.ID })-->
<!--    type.value = 'update'-->
<!--    if (res.code === 0) {-->
<!--        formData.value = res.data-->
<!--        dialogFormVisible.value = true-->
<!--    }-->
<!--}-->


<!--// 删除行-->
<!--const deleteDeviceFunc = async (row) => {-->
<!--    const res = await deleteDevice({ ID: row.ID })-->
<!--    if (res.code === 0) {-->
<!--        ElMessage({-->
<!--                type: 'success',-->
<!--                message: '删除成功'-->
<!--            })-->
<!--            if (tableData.value.length === 1 && page.value > 1) {-->
<!--            page.value&#45;&#45;-->
<!--        }-->
<!--        getTableData()-->
<!--    }-->
<!--}-->

<!--// 弹窗控制标记-->
<!--const dialogFormVisible = ref(false)-->

<!--// 打开弹窗-->
<!--const openDialog = () => {-->
<!--    type.value = 'create'-->
<!--    dialogFormVisible.value = true-->
<!--}-->

<!--// 关闭弹窗-->
<!--const closeDialog = () => {-->
<!--    dialogFormVisible.value = false-->
<!--    formData.value = {-->
<!--        deviceNumber: '',-->
<!--        name: '',-->
<!--        location: '',-->
<!--        operationalStatus: '',-->
<!--        runningStatus: '',-->
<!--        activeStatus: '',-->
<!--        softwareVersion: '',-->
<!--        afterSalesStaff: '',-->
<!--        }-->
<!--}-->
<!--// 弹窗确定-->
<!--const enterDialog = async () => {-->
<!--     btnLoading.value = true-->
<!--     elFormRef.value?.validate( async (valid) => {-->
<!--             if (!valid) return btnLoading.value = false-->
<!--              let res-->
<!--              switch (type.value) {-->
<!--                case 'create':-->
<!--                  res = await createDevice(formData.value)-->
<!--                  break-->
<!--                case 'update':-->
<!--                  res = await updateDevice(formData.value)-->
<!--                  break-->
<!--                default:-->
<!--                  res = await createDevice(formData.value)-->
<!--                  break-->
<!--              }-->
<!--              btnLoading.value = false-->
<!--              if (res.code === 0) {-->
<!--                ElMessage({-->
<!--                  type: 'success',-->
<!--                  message: '创建/更改成功'-->
<!--                })-->
<!--                closeDialog()-->
<!--                getTableData()-->
<!--              }-->
<!--      })-->
<!--}-->

<!--const detailFrom = ref({})-->

<!--// 查看详情控制标记-->
<!--const detailShow = ref(false)-->


<!--// 打开详情弹窗-->
<!--const openDetailShow = () => {-->
<!--  detailShow.value = true-->
<!--}-->


<!--// 打开详情-->
<!--const getDetails = async (row) => {-->
<!--  // 打开弹窗-->
<!--  const res = await findDevice({ ID: row.ID })-->
<!--  if (res.code === 0) {-->
<!--    detailFrom.value = res.data-->
<!--    openDetailShow()-->
<!--  }-->
<!--}-->


<!--// 关闭详情弹窗-->
<!--const closeDetailShow = () => {-->
<!--  detailShow.value = false-->
<!--  detailFrom.value = {}-->
<!--}-->

<!--// 添加：状态标签类型映射函数-->
<!--const getStatusTagType = (status) => {-->
<!--  const statusMap = {-->
<!--    '在用': 'primary',-->
<!--    '停用': 'warning',-->
<!--    '闲置': 'info'-->
<!--  }-->
<!--  return statusMap[status] || 'default'-->
<!--}-->

<!--// 添加：运行状态标签类型映射函数-->
<!--const getRunningTagType = (status) => {-->
<!--  const statusMap = {-->
<!--    '正常': 'success',-->
<!--    '故障': 'danger'-->
<!--  }-->
<!--  return statusMap[status] || 'default'-->
<!--}-->

<!--// 添加：去提醒按钮方法-->
<!--const goRemind = (row) => {-->
<!--  ElMessage.info(`将对设备【${row.name}】(${row.deviceNumber}) 执行提醒操作`)-->
<!--  // 实际可调用接口：axios.post('/remind', { deviceCode: row.deviceCode })-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--  /* 添加：表格样式调整 */-->
<!--  .gva-table-box {-->
<!--    color: #333; /* 表格文字主色 */-->
<!--  }-->

<!--  /* 添加：表头样式 */-->
<!--  .el-table th {-->
<!--    background-color: #f8f9fa !important; /* 表头背景色 */-->
<!--    color: #333 !important; /* 表头文字色 */-->
<!--    text-align: center !important; /* 表头文字居中 */-->
<!--  }-->

<!--  /* 添加：状态标签样式 */-->
<!--  .el-tag {-->
<!--    padding: 2px 6px;-->
<!--    font-size: 12px;-->
<!--  }-->

<!--  /* 添加：激活状态图标样式 */-->
<!--  .el-table .cell i {-->
<!--    vertical-align: middle;-->
<!--  }-->

<!--  /* 添加：表格行悬停样式 */-->
<!--  .el-table__row:hover {-->
<!--    background-color: #f8f9fa !important;-->
<!--  }-->

<!--  /* 添加：分页样式 */-->
<!--  .gva-pagination {-->
<!--    margin-top: 20px;-->
<!--    text-align: right;-->
<!--  }-->
<!--</style>-->


<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter="onSubmit">
        <el-form-item label="创建日期" prop="createdAtRange">
          <template #label>
            <span>
              创建日期
              <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </span>
          </template>
          <el-date-picker
            v-model="searchInfo.createdAtRange"
            class="w-[380px]"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="运营状态" prop="operationalStatus">
          <el-select v-model="searchInfo.operationalStatus" clearable filterable placeholder="请选择" @clear="()=>{searchInfo.operationalStatus=undefined}">
            <el-option v-for="(item,key) in operation_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="运行状态" prop="runningStatus">
          <el-select v-model="searchInfo.runningStatus" clearable filterable placeholder="请选择" @clear="()=>{searchInfo.runningStatus=undefined}">
            <el-option v-for="(item,key) in run_stateOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="激活状态" prop="activeStatus">
          <el-select v-model="searchInfo.activeStatus" clearable filterable placeholder="请选择" @clear="()=>{searchInfo.activeStatus=undefined}">
            <el-option v-for="(item,key) in activated_stateOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <template v-if="showAllQuery">
          <!-- 将需要控制显示状态的查询条件添加到此范围内 -->
        </template>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
          <el-button link type="primary" icon="arrow-down" @click="showAllQuery=true" v-if="!showAllQuery">展开</el-button>
          <el-button link type="primary" icon="arrow-up" @click="showAllQuery=false" v-else>收起</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button v-auth="btnAuth.add" type="primary" icon="plus" @click="openDialog()">新增</el-button>
        <el-button v-auth="btnAuth.batchDelete" icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>
      </div>
      <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        :data="tableData"
        row-key="ID"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ background: '#f1f3f4', color: '#333', fontWeight: 'bold' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column sortable align="left" label="日期" prop="CreatedAt" width="180">
          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
        </el-table-column>
        <el-table-column align="left" label="设备编号" prop="deviceNumber" width="120" />
        <el-table-column align="left" label="设备名称" prop="name" width="120" />
        <el-table-column align="left" label="所在位置" prop="location" width="120" />
        <el-table-column align="left" label="运营状态" prop="operationalStatus" width="120">
          <template #default="scope">
            <el-tag
              :type="getStatusTagType(scope.row.operationalStatus)"
              style="padding: 2px 6px; font-size: 12px; border-radius: 4px; display: inline-flex; align-items: center; color: #d93c3c;"
            >
              <i :class="getOperationIcon(scope.row.operationalStatus)" style="margin-right: 4px;"></i>
              {{ filterDict(scope.row.operationalStatus, operation_statusOptions) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="left" label="运行状态" prop="runningStatus" width="120">
          <template #default="scope">
            <el-tag
              :type="getRunningTagType(scope.row.runningStatus)"
              style="padding: 2px 6px; font-size: 12px; border-radius: 4px; display: inline-flex; align-items: center; color: #0c8329;"
            >
              <i :class="getRunningIcon(scope.row.runningStatus)" style="margin-right: 4px;"></i>
              {{ filterDict(scope.row.runningStatus, run_stateOptions) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="left" label="激活状态" prop="activeStatus" width="120">
          <template #default="scope">
            <div class="activation-status flex items-center">
              <i
                :class="scope.row.activeStatus === '已激活' ? 'el-icon-check' : 'el-icon-close'"
                :style="{
                  color: scope.row.activeStatus === '已激活' ? '#409eff' : '#f56c6c',
                  marginRight: '4px',
                  fontSize: '14px'
                }"
              ></i>
              <span :style="{ color: scope.row.activeStatus === '已激活' ? '#b8b6b6' : '#acaaaa' }">
                {{ filterDict(scope.row.activeStatus, activated_stateOptions) }}
              </span>
              <el-button
                v-if="scope.row.activeStatus === '未激活'"
                type="text"
                size="mini"
                @click="goRemind(scope.row)"
                style="color: #409eff; padding: 0; margin-left: 4px; font-size: 12px;"
              >
                <i class="el-icon-bell" style="margin-right: 2px;"></i>去提醒
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="软件版本" prop="softwareVersion" width="120" />
        <el-table-column align="left" label="售后人员" prop="afterSalesStaff" width="120" />
        <el-table-column align="left" label="操作" fixed="right" :min-width="appStore.operateMinWith">
          <template #default="scope">
            <div class="flex space-x-1">
              <el-button v-auth="btnAuth.info" type="text" size="mini" @click="getDetails(scope.row)"
                         style="color: #409eff; padding: 0;">
                <i class="el-icon-view"></i>查看
              </el-button>
              <el-button v-auth="btnAuth.edit" type="text" size="mini" @click="updateDeviceFunc(scope.row)"
                         style="color: #67c23a; padding: 0;">
                <i class="el-icon-edit"></i>编辑
              </el-button>
              <el-button v-auth="btnAuth.delete" type="text" size="mini" @click="deleteRow(scope.row)"
                         style="color: #f56c6c; padding: 0;">
                <i class="el-icon-delete"></i>删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="dialogFormVisible" :show-close="false" :before-close="closeDialog">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ type === 'create' ? '新增' : '编辑' }}</span>
          <div>
            <el-button :loading="btnLoading" type="primary" @click="enterDialog">确 定</el-button>
            <el-button @click="closeDialog">取 消</el-button>
          </div>
        </div>
      </template>
      <el-form :model="formData" label-position="top" ref="elFormRef" :rules="rule" label-width="80px">
        <el-form-item label="设备编号:" prop="deviceNumber">
          <el-input v-model="formData.deviceNumber" :clearable="false" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item label="设备名称:" prop="name">
          <el-input v-model="formData.name" :clearable="false" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="所在位置:" prop="location">
          <el-input v-model="formData.location" :clearable="false" placeholder="请输入所在位置" />
        </el-form-item>
        <el-form-item label="运营状态:" prop="operationalStatus">
          <el-select v-model="formData.operationalStatus" placeholder="请选择运营状态" style="width: 100%" filterable :clearable="false">
            <el-option v-for="(item, key) in operation_statusOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="运行状态:" prop="runningStatus">
          <el-select v-model="formData.runningStatus" placeholder="请选择运行状态" style="width: 100%" filterable :clearable="false">
            <el-option v-for="(item, key) in run_stateOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="激活状态:" prop="activeStatus">
          <el-select v-model="formData.activeStatus" placeholder="请选择激活状态" style="width: 100%" filterable :clearable="false">
            <el-option v-for="(item, key) in activated_stateOptions" :key="key" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="软件版本:" prop="softwareVersion">
          <el-input v-model="formData.softwareVersion" :clearable="false" placeholder="请输入软件版本" />
        </el-form-item>
        <el-form-item label="售后人员:" prop="afterSalesStaff">
          <el-input v-model="formData.afterSalesStaff" :clearable="false" placeholder="请输入售后人员" />
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="detailShow" :show-close="true" :before-close="closeDetailShow" title="查看">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="设备编号">
          {{ detailFrom.deviceNumber }}
        </el-descriptions-item>
        <el-descriptions-item label="设备名称">
          {{ detailFrom.name }}
        </el-descriptions-item>
        <el-descriptions-item label="所在位置">
          {{ detailFrom.location }}
        </el-descriptions-item>
        <el-descriptions-item label="运营状态">
          {{ detailFrom.operationalStatus }}
        </el-descriptions-item>
        <el-descriptions-item label="运行状态">
          {{ detailFrom.runningStatus }}
        </el-descriptions-item>
        <el-descriptions-item label="激活状态">
          {{ detailFrom.activeStatus }}
        </el-descriptions-item>
        <el-descriptions-item label="软件版本">
          {{ detailFrom.softwareVersion }}
        </el-descriptions-item>
        <el-descriptions-item label="售后人员">
          {{ detailFrom.afterSalesStaff }}
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script setup>
  import {
    createDevice,
    deleteDevice,
    deleteDeviceByIds,
    updateDevice,
    findDevice,
    getDeviceList
  } from '@/api/equipment_management/device'
  import { getDictFunc, formatDate, filterDict } from '@/utils/format'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { ref, reactive } from 'vue'
  import { useBtnAuth } from '@/utils/btnAuth'
  import { useAppStore } from '@/pinia'

  defineOptions({
    name: 'Device'
  })
  const btnAuth = useBtnAuth()
  const btnLoading = ref(false)
  const appStore = useAppStore()
  const showAllQuery = ref(false)
  const operation_statusOptions = ref([])
  const run_stateOptions = ref([])
  const activated_stateOptions = ref([])
  const formData = ref({
    deviceNumber: '',
    name: '',
    location: '',
    operationalStatus: '',
    runningStatus: '',
    activeStatus: '',
    softwareVersion: '',
    afterSalesStaff: ''
  })
  const rule = reactive({
    deviceNumber: [
      {
        required: true,
        message: '',
        trigger: ['input', 'blur']
      },
      {
        whitespace: true,
        message: '不能只输入空格',
        trigger: ['input', 'blur']
      }
    ],
    name: [
      {
        required: true,
        message: '',
        trigger: ['input', 'blur']
      },
      {
        whitespace: true,
        message: '不能只输入空格',
        trigger: ['input', 'blur']
      }
    ],
    location: [
      {
        required: true,
        message: '',
        trigger: ['input', 'blur']
      },
      {
        whitespace: true,
        message: '不能只输入空格',
        trigger: ['input', 'blur']
      }
    ],
    operationalStatus: [
      {
        required: true,
        message: '',
        trigger: ['input', 'blur']
      },
      {
        whitespace: true,
        message: '不能只输入空格',
        trigger: ['input', 'blur']
      }
    ],
    runningStatus: [
      {
        required: true,
        message: '',
        trigger: ['input', 'blur']
      },
      {
        whitespace: true,
        message: '不能只输入空格',
        trigger: ['input', 'blur']
      }
    ],
    activeStatus: [
      {
        required: true,
        message: '',
        trigger: ['input', 'blur']
      },
      {
        whitespace: true,
        message: '不能只输入空格',
        trigger: ['input', 'blur']
      }
    ],
    softwareVersion: [
      {
        required: true,
        message: '',
        trigger: ['input', 'blur']
      },
      {
        whitespace: true,
        message: '不能只输入空格',
        trigger: ['input', 'blur']
      }
    ],
    afterSalesStaff: [
      {
        required: true,
        message: '',
        trigger: ['input', 'blur']
      },
      {
        whitespace: true,
        message: '不能只输入空格',
        trigger: ['input', 'blur']
      }
    ]
  })
  const elFormRef = ref()
  const elSearchFormRef = ref()
  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])
  const searchInfo = ref({})
  const onReset = () => {
    searchInfo.value = {}
    getTableData()
  }
  const onSubmit = () => {
    elSearchFormRef.value?.validate(async (valid) => {
      if (!valid) return
      page.value = 1
      getTableData()
    })
  }
  const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
  }
  const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
  }
  const getTableData = async () => {
    const table = await getDeviceList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
      tableData.value = table.data.list
      total.value = table.data.total
      page.value = table.data.page
      pageSize.value = table.data.pageSize
    }
  }
  getTableData()
  const setOptions = async () => {
    operation_statusOptions.value = await getDictFunc('operation_status')
    run_stateOptions.value = await getDictFunc('run_state')
    activated_stateOptions.value = await getDictFunc('activated_state')
  }
  setOptions()
  const multipleSelection = ref([])
  const handleSelectionChange = (val) => {
    multipleSelection.value = val
  }
  const deleteRow = (row) => {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      deleteDeviceFunc(row)
    })
  }
  const onDelete = async () => {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const IDs = []
      if (multipleSelection.value.length === 0) {
        ElMessage({
          type: 'warning',
          message: '请选择要删除的数据'
        })
        return
      }
      multipleSelection.value &&
      multipleSelection.value.map(item => {
        IDs.push(item.ID)
      })
      const res = await deleteDeviceByIds({ IDs })
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        if (tableData.value.length === IDs.length && page.value > 1) {
          page.value--
        }
        getTableData()
      }
    })
  }
  const type = ref('')
  const updateDeviceFunc = async (row) => {
    const res = await findDevice({ ID: row.ID })
    type.value = 'update'
    if (res.code === 0) {
      formData.value = res.data
      dialogFormVisible.value = true
    }
  }
  const deleteDeviceFunc = async (row) => {
    const res = await deleteDevice({ ID: row.ID })
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      if (tableData.value.length === 1 && page.value > 1) {
        page.value--
      }
      getTableData()
    }
  }
  const dialogFormVisible = ref(false)
  const openDialog = () => {
    type.value = 'create'
    dialogFormVisible.value = true
  }
  const closeDialog = () => {
    dialogFormVisible.value = false
    formData.value = {
      deviceNumber: '',
      name: '',
      location: '',
      operationalStatus: '',
      runningStatus: '',
      activeStatus: '',
      softwareVersion: '',
      afterSalesStaff: ''
    }
  }
  const enterDialog = async () => {
    btnLoading.value = true
    elFormRef.value?.validate(async (valid) => {
      if (!valid) return (btnLoading.value = false)
      let res
      switch (type.value) {
        case 'create':
          res = await createDevice(formData.value)
          break
        case 'update':
          res = await updateDevice(formData.value)
          break
        default:
          res = await createDevice(formData.value)
          break
      }
      btnLoading.value = false
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '创建/更改成功'
        })
        closeDialog()
        getTableData()
      }
    })
  }
  const detailFrom = ref({})
  const detailShow = ref(false)
  const openDetailShow = () => {
    detailShow.value = true
  }
  const getDetails = async (row) => {
    const res = await findDevice({ ID: row.ID })
    if (res.code === 0) {
      detailFrom.value = res.data
      openDetailShow()
    }
  }
  const closeDetailShow = () => {
    detailShow.value = false
    detailFrom.value = {}
  }
  const getStatusTagType = (status) => {
    const statusMap = {
      '在用': 'primary',
      '停用': 'warning',
      '闲置': 'info'
    }
    return statusMap[status] || 'default'
  }
  const getRunningTagType = (status) => {
    const statusMap = {
      '正常': 'success',
      '故障': 'danger'
    }
    return statusMap[status] || 'default'
  }
  const getOperationIcon = (status) => {
    const iconMap = {
      '在用': 'el-icon-check',
      '停用': 'el-icon-close',
      '闲置': 'el-icon-time'
    }
    return iconMap[status] || 'el-icon-question'
  }
  const getRunningIcon = (status) => {
    const iconMap = {
      '正常': 'el-icon-success',
      '故障': 'el-icon-error'
    }
    return iconMap[status] || 'el-icon-question'
  }
  const goRemind = (row) => {
    ElMessage.info(`将对设备【${row.name}】(${row.deviceNumber}) 执行提醒操作`)
    // 实际可调用接口：axios.post('/remind', { deviceCode: row.deviceCode })
  }
</script>

<style scoped>
  .gva-table-box {
    color: #333;
  }

  .el-table th {
    background-color: #f1f3f4 !important;
    color: #333 !important;
    text-align: center !important;
    font-weight: bold !important;
    border-bottom: 1px solid #ebeef5 !important;
  }

  .el-table__row {
    transition: background-color 0.2s ease;
  }

  .el-table__row:hover {
    background-color: #f8fafc !important;
  }

  .el-table__cell {
    padding: 8px 0 !important;
    color: #606266 !important; /* 统一单元格文字颜色 */
  }

  .activation-status {
    display: flex;
    align-items: center;
  }

  .gva-pagination {
    margin-top: 20px;
    text-align: right;
  }

  .el-tag {
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
  }

  /* 优化表格内按钮样式 */
  .el-button {
    padding: 0 5px !important;
    font-size: 12px !important;
  }

  /* 操作列按钮组 */
  .flex.space-x-1 .el-button {
    margin-right: 5px;
  }

  /* 分页样式优化 */
  .el-pagination {
    padding: 12px 0 !important;
  }
</style>